<template>
  <div class="config-item">
    <a-row class="config-item-title">
      <a-col :span="6">{{title}}</a-col>
      <a-col :span="18">
        <div class="config-item-auxiliary">
          <slot name="auxiliary"/>
        </div>
        <div class="config-item-enhance">
          <slot name="enhance"/>
        </div>
      </a-col>
    </a-row>
    <div class="config-item-content">
      <slot name="content"/>
    </div>
  </div>
</template>

<script>
import { Row, Col } from 'ant-design-vue';
export default {
    name: 'ConfigItem',
    components: {
      [Row.name]: Row,
      [Col.name]: Col
    },
    props: {
      title: {
        type: String,
        default: ''
      }
    }
}
</script>

<style lang="less" scoped>
.config-item {
    padding: 10px 12px;

    &-enhance {
      margin-top: 12px;
    }

    &-content {
      margin-top: 12px;
    }
}
</style>